<template>
    <div id='system-repay'>
        <!-- <h1 class="card-title">
            <p><span>线下还款配置</span></p>
        </h1> -->
        <div class="loading-min-height">
            <div class='detail-info'>

                <div class="card-content">
                    <div class="sub-title">
                        <span class='title'>还款账号</span>
                    </div>
                    <div class="form-item">
                        <span class="form-item__key">账号：</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入账号" v-model='configInfo.underLineAccountNo'>
                        </div>
                    </div>
                    <div class='layout-jcc' @click='save'><p class="button width-auto">保存账号</p></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>    
    import { Promise } from 'es6-promise'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import datePicker from '../components/DatePicker.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import checkBox from '../components/CheckBox.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import toPercent from '../filters/filter-toPercent'
    import  { mapGetters, mapActions }  from 'vuex'
    import { systemApi, allApi, youxinApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            radioGroup,
            radio,
            selectGroup,
            selectOption,
            echarts,
            loading,
            modal,
            tab,
            tabBox,
            checkBox,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            toPercent,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                configInfo:'',
                loading:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            getAppConfig(){
                this.loading = true
                systemApi.getAppConfig()
                .then(result=>{
                    this.configInfo = result
                    this.loading = false
                })
                .catch(error=>{
                    console.error(error)
                    this.loading = false
                })
            },
            save(){
                this.showLoading()
                systemApi.setAppConfig({
                    configKey:'underLineAccountNo',
                    configValue:this.configInfo.underLineAccountNo
                })
                .then(result=>{
                    this.setMsgTip({
                        text:'保存成功',
                        type:'success'
                    })
                    this.hideLoading()
                })
                .catch(error=>{
                    console.error(error)
                    this.hideLoading()
                })
            }
        },
        created(){
            this.getAppConfig()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #system-repay{
        .logo-save-button{
            display: inline-block;
            margin-left: 27px;
            margin-top: 10px;
        }
        .form-item__value{
            flex:1;
        }
    }
</style>
